<script setup lang="ts">
import {onMounted, onUnmounted, reactive,ref} from "vue";
import dayjs from 'dayjs';
import type {DateDataType} from "./index.d"
import {useSettingStore} from "@/stores"
import {apiWeather} from "@/api";

const dateData = reactive<DateDataType>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null
});

const timer = ref()

const { setSettingShow} =useSettingStore()
const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("HH:mm:ss");
    dateData.dateYear = dayjs().format("YYYY.MM.DD");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn()

const weather = ref<any>({})

const getWeather = async () => {
  const res = await apiWeather()
  weather.value = res.data?.result?.now
}

onMounted(()=>{
  getWeather()
  timer.value = setInterval(()=>{
    getWeather()
  },1000 * 60 * 10)
})

onUnmounted(()=>{
  if(dateData.timing) clearInterval(dateData.timing)
  if(timer.value) clearInterval(timer.value)
})
</script>

<template>
  <div style="pointer-events: none">
    <div class="fixed w-[100%] h-[100%] z-[2]">
      <div class="w-[642px] h-[1080px] left" style="pointer-events: auto">
        <img class="w-[100%] h-[100%]" src="@/assets/img/bg-l.png">
      </div>
      <div class="w-[642px] h-[1080px] right">
        <img class="w-[100%] h-[100%]" src="@/assets/img/bg-r.png">
      </div>
    </div>
    <div class="fixed w-[100%] h-[100%] z-10">
      <div class="title_wrap">
        <div class="title pt-[27px]">
          <span class="title-text ff-YouSheBiaoTiHei">京瑞数据可视化中心</span>
        </div>
      </div>
      <div class="w-[642px] h-[1080px] left">
        <div class="timers text-[#1A1A1A] flex items-center pl-[274px] pt-[16px]">
          <div class="text-[32px] mr-[8px] ff-DINAlternate-Bold">{{ dateData.dateDay }}</div>
          <div class="text-[14px]">
            <div>{{ dateData.dateWeek }}</div>
            <div class="mt-[-5px]">{{ dateData.dateYear }}</div>
          </div>
        </div>
      </div>
      <div class="w-[642px] h-[1080px] right">
        <div class="flex items-center pl-[210px] pt-[18px]">
          <div class="text-[28px] text-[#1A1A1A] flex items-center ml-[10px] font-medium">
            <div class="ff-DINAlternate-Bold">{{weather?.feels_like}}℃</div>
            <div class="ml-[20px]">{{ weather?.text }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title_wrap {
  height: 97px;
  background-image: url("../assets/img/top.png");
  background-size: cover;
  background-position: center center;
  position: absolute;
  margin-bottom: 4px;
  top: 0;
  left: 50%;
  width: 967px;
  transform: translate(-50%);
  .timers {
    position: absolute;
    left: 160px;
    top: 38px;
    font-size: 18px;
    display: flex;
    align-items: center;

    .setting_icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 12px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .title {
    position: relative;
    // width: 500px;
    text-align: center;
    background-size: cover;
    color: rgba(26, 26, 26, 1);

    .title-text {
      font-size: 48px;
      //letter-spacing: 6px;
    }
  }
}

.left{
  position: absolute;
  left: 0;
  top: 0;
  background: url("../assets/img/left.png") 0 0 /100% 100% no-repeat;
  z-index: 1;
}

.right{
  position: absolute;
  right: 0;
  top: 0;
  background: url("../assets/img/right.png") 0 0 /100% 100% no-repeat;
  z-index: 1;
}
</style>
